<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="../../yl/index.css" />
    <link rel="stylesheet" href="../../yl/style.css" />
    <link rel="stylesheet" href="../../style/free.css" />
    <title>问卷调查</title>
    <style>
        body {
            background-color: rgb(244, 244, 244);
        }

        .tab-item {
            margin-top: 2px;
            transition: all 0.3s ease;
            border-bottom: 2px solid #fff;
        }

        .first {
            color: #479A4C;
            border-bottom: 2px solid #479A4C;
        }
    </style>
</head>

<body>
    <div id="app" class="flex flex-column" style="padding-top: 94rem;">
        <template v-if="true">
            <div class="fixed-top" style="height: 94rem; background-color: rgb(244, 244, 244)">
                <div class="flex justify-around bg-white fixed-top mb-3" style="height: 64rem;">
                    <div v-for="(item,index) in tabs" :key="index" :class="{'first':form.action == index}"
                        @click="handleTab(index)" class="tab-item h6 text-muted flex align-center justify-center">
                        {{item}}
                    </div>
                </div>
            </div>
            <div class="mx-3 rounded-lg bg-white py-2 mb-3" v-for="(item,index) in tableData" :key="index">
                <div class="font-weight-bold font mb-2 mx-3">{{item.Questionnaire_Name}}</div>
                <div class="flex">
                    <div class="ml-3" v-if="item.Picture_URL">
                        <img :src="photo + item.Picture_URL" class="rounded" style="width: 140rem; height: 140rem;" alt="">
                    </div>
                    <div>
                        <div class="font-sm mx-3 mb-2">
                            <span class="text-muted">参与奖励：</span>
                            <span>{{item.Points}} 积分</span>
                        </div>
                        <div class="font-sm mx-3 mb-2">
                            <span class="text-muted">截止日期：</span>
                            <span>{{item.End_DateTime}}</span>
                        </div>
                        <div class="font-sm mx-3 mb-2">
                            <span class="text-muted">备注：</span>
                            <span>{{item.Questionnaire_Notes}}</span>
                        </div>
                    </div>
                </div>
                <div class="font-sm text-center" @click="handleClick(item)">
                    <div class="border-top mx-3 pt-2 pb-1">
                        {{+new Date() < +new Date(item.End_DateTime) ? '前往提交':'已结束'}}
                    </div>
                </div>
            </div>
            <div v-if="tableData.length == 0" class="font text-muted flex justify-center align-center" style="height: 70vh;">
                暂无数据
            </div>
            <div v-if="loading" class="font-sm text-muted text-center mb-2">
                {{total > tableData.length ? '加载中...':'到底了...'}} 
            </div>
        </template>
    </div>
    <script src="../../utils/utils.js"></script>
    <script src="../../utils/mixins.js"></script>
    <script src="../../config/config.js"></script>
    <script src="../../yl/vue.js"></script>
    <script src="../../yl/index.js"></script>
    <script src="../../yl/zh-cn.mjs"></script>
    <script src="../../yl/index.iife.min.js"></script>
    <script src="../../yl/jquery.min.js"></script>
    <script src="../../utils/jquery.cookie.js"></script>
    <script src="../../api/request.js"></script>
    <script src="../../utils/jweixin.js"></script>
    <script src="./js/index.js"></script>
</body>

</html>